<template>
  <div class="d-flex flex-column gap-col-16">
    <i18n-t
      keypath="content.shopBuy.success"
      tag="div"
      class="popup-dialog-text font-size-14 font-weight-400 line-height-140 text-center"
    >
      <template #nickname>
        <span class="text-primary">{{ content?.nickname }}</span>
      </template>
      <template #num>
        <span>{{ content?.num || 1 }}</span>
      </template>
    </i18n-t>
    <div v-if="content?.show_caption">
      <i18n-t
        keypath="content.shopBuy.success2.text"
        tag="div"
        class="popup-dialog-text font-size-14 font-weight-400 line-h1eight-140 text-center"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('content.shopBuy.success2.highlight') }}</span>
        </template>
      </i18n-t>
      <i18n-t
        keypath="content.shopBuy.success3.text"
        tag="div"
        class="popup-dialog-text font-size-14 font-weight-400 line-height-140 text-center"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('content.shopBuy.success3.highlight') }}</span>
        </template>
      </i18n-t>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { useConfirmData } from '@/compositions/dialog/confirm-data'

const popupDialogStore = usePopupDialogStore()
const { content } = storeToRefs(popupDialogStore)

useConfirmData(() => {
  return true
})
</script>
